<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="70px">
            <el-form-item label="服务名称" prop="serviceName">
                <el-input v-model="queryParams.serviceName" placeholder="请输入服务名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="规格名" prop="standardsName">
                <el-input v-model="queryParams.standardsName" placeholder="请输入规格名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单编号" prop="orderNumber">
                <el-input v-model="queryParams.orderNumber" placeholder="请输入订单编号" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="服务工人" prop="staffName">
                <el-input v-model="queryParams.staffName" placeholder="请输入服务工人名称" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select clearable v-model="queryParams.statusCode" placeholder="请选择">
                    <el-option v-for="item in orderStatusLabelList" :key="item.statusCode" :label="item.statusLabel"
                        :value="item.statusCode">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="服务状态">
                <el-select clearable v-model="queryParams.uStatusId" placeholder="请选择">
                    <el-option v-for="item in orderStatusTitleList" :key="item.orderStatusId" :label="item.statusTitle"
                        :value="item.orderStatusId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="orderList" @expand-change="rowExpand">
            <el-table-column type="expand" prop="">
                <template slot-scope="scope">
                    <el-table :data="scope.row.orderUserVO">
                        <el-table-column align="center" label="联系人" prop="receiver" />
                        <el-table-column align="center" label="联系电话" prop="receiverPhone" />
                        <el-table-column align="center" label="服务地址" prop="orderAddress" />
                        <el-table-column align="center" label="服务时间" prop="serviceTime" />
                        <el-table-column align="center" label="状态">
                            <template slot-scope=" scope">
                                <span :style="'color:' + scope.row.orderStatus.statusIconColor">{{
                                    scope.row.orderStatus.statusTitle }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <el-button v-if="scope.row.orderStatus.orderStatusId < 4" size="mini" type="text"
                                    icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
                                <el-button v-if="scope.row.orderStatus.orderStatusId == 3" size="mini" type="text"
                                    icon="el-icon-circle-check" @click="handleSelectStaff(scope.row)">分配工人</el-button>
                                <el-button
                                    v-if="scope.row.orderStatus.orderStatusId == 6 || scope.row.orderStatus.orderStatusId == 8"
                                    size="mini" type="text" icon="el-icon-tickets"
                                    @click="handleViewServiceLog(scope.row)">服务日志</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column label="订单ID" align="center" prop="orderId" />
            <el-table-column label="用户id" align="center" prop="miniProgramUserId" />
            <el-table-column label="服务名称" align="center" prop="serviceName" />
            <el-table-column label="规格名" align="center" prop="standardsName" />
            <el-table-column label="服务次数" align="center" prop="serviceNum" />
            <el-table-column label="次数余量" align="center" prop="serviceNumSurplus" />
            <el-table-column label="订单备注" align="center" prop="orderRemarks" />
            <el-table-column label="订单编号" align="center" prop="orderNumber" />
            <el-table-column label="订单金额" align="center" prop="orderPrice" />
            <el-table-column label="支付时间" align="center" prop="payTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.payTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="状态">
                <template slot-scope=" scope">
                    <span :style="'color:' + scope.row.orderStatus.statusIconColor">{{
                        scope.row.orderStatus.statusLabel }}</span>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" width="180">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                    <template v-if="scope.row.orderStatus.orderStatusId == 11">
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleRefund(scope.row)">退款查看</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />

        <!-- 添加或修改order对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="联系人" prop="receiver">
                    <el-input v-model="form.receiver" placeholder="请输入联系人" />
                </el-form-item>
                <el-form-item label="联系电话" prop="receiverPhone">
                    <el-input v-model="form.receiverPhone" placeholder="请输入联系电话" />
                </el-form-item>
                <el-form-item label="服务地址" prop="orderAddress">
                    <el-input v-model="form.orderAddress" placeholder="请输入服务地址" />
                </el-form-item>
                <el-form-item label="服务时间" prop="serviceTime">
                    <el-input v-model="form.serviceTime" placeholder="请输入服务时间" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 退款原因对话框 -->
        <el-dialog title="退款" :visible.sync="refundOpen" width="500px" append-to-body>
            <el-form ref="refundForm" :model="refundForm" label-width="80px">
                <el-form-item label="订单号" prop="orderNumber">
                    <el-input v-model="refundForm.orderNumber" :disabled="true" placeholder="订单编号" />
                </el-form-item>
                <el-form-item label="退款原因" prop="reason">
                    <el-input v-model="refundForm.reason" :disabled="true" placeholder="退款原因" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="refundOrder">通 过</el-button>
                <!-- <el-button type="error" @click="">打 回</el-button> -->
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
<script>
import { listOrder, listOrderStatusLabel, listOrderStatusTitle, getRefundInfo, submitRefund, getOrder, delOrder, addOrder, updateOrder } from "@/api/miniprogram/order";

export default {
    name: "Order",
    data() {
        return {
            // 遮罩层
            loading: false,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // order表格数据
            orderList: [],
            //order状态数据
            orderStatusLabelList: [],
            orderStatusTitleList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            refundOpen: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                miniProgramUserId: null,
                serviceId: null,
                serviceStandardsId: null,
                serviceCoverImg: null,
                serviceName: null,
                standardsName: null,
                serviceNum: null,
                serviceNumSurplus: null,
                orderRemarks: null,
                orderNumber: null,
                orderPrice: null,
                payTime: null,
                statusCode: null,
                uStatusId: null,
                staffName: null
            },
            // 表单参数
            form: {},
            // 退款表单
            refundForm: {},
            // 表单校验
            rules: {
                miniProgramUserId: [
                    { required: true, message: "用户id不能为空", trigger: "blur" }
                ],
            }
        };
    },
    created() {
        this.getList();
        this.getStatusList();
    },
    activated() {
        this.getList();
    },
    methods: {
        //为服务分配服务工人
        handleSelectStaff(row) {
            console.log("跳转分配", row);
            const orderUserId = row.orderUserId;
            this.$router.push("/miniprogram/staff-select/staff/" + orderUserId);
        },
        /** 查询order列表 */
        getList() {
            this.loading = true;
            listOrder(this.queryParams).then(res => {
                let response = res.data;
                console.log(response);
                this.total = response.total;
                this.loading = false;
                this.orderList = response.records;
            });
        },
        // 查询订单的状态列表
        getStatusList() {
            this.loading = true;
            listOrderStatusLabel().then(res1 => {
                listOrderStatusTitle().then(res2 => {
                    this.orderStatusLabelList = res1.data;
                    this.orderStatusTitleList = res2.data;
                    this.loading = false;
                })
            })
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.refundOpen = false;
            this.reset();
        },

        rowExpand(row, expandeRows) {

        },
        // 表单重置
        reset() {
            this.form = {
                orderId: null,
                miniProgramUserId: null,
                serviceId: null,
                serviceStandardsId: null,
                serviceCoverImg: null,
                serviceName: null,
                standardsName: null,
                serviceNum: null,
                serviceNumSurplus: null,
                orderRemarks: null,
                orderNumber: null,
                orderPrice: null,
                payTime: null,
                createBy: null,
                createTime: null,
                updateBy: null,
                updateTime: null,
                remark: null
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 修改按钮操作 */
        handleUpdate(row) {
            console.log(row);
            // this.reset();
            const orderId = row.orderId || this.ids
            this.open = true;
            this.form = row;
        },
        //退款查看
        handleRefund(row) {
            let order = row;
            let query = {
                orderNumber: order.orderNumber
            }
            this.refundForm = {};
            getRefundInfo(query).then(res => {
                this.refundForm = res.data;
                this.refundOpen = true;
            })
        },
        //退款批准
        refundOrder() {
            submitRefund(this.refundForm.orderNumber).then(res => {
                this.$modal.msgSuccess("操作成功");
                this.refundOpen = false;
            })
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.orderId != null) {
                        updateOrder(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.open = false;
                            this.getList();
                        });
                    } else {
                        addOrder(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.open = false;
                            this.getList();
                        });
                    }
                }
            });
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const orderIds = row.orderId || this.ids;
            this.$modal.confirm('是否确认删除order编号为"' + orderIds + '"的数据项？').then(function () {
                return delOrder(orderIds);
            }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        //服务日志查看
        handleViewServiceLog(row) {
            console.log("跳转日志", row);
            const orderUserId = row.orderUserId;
            this.$router.push("/miniprogram/serviceLog/" + orderUserId);
        }
    }
};
</script>
  